<template>
  <div class="nav_contenter">
    <div class="nav_contenter_flex">
      <div
        :class="['nav_item',{'active' :index == navindex}]"
        v-for="(item,index) in navlist"
        :key="index"
        @click="onClick(index)"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    navlist: {
      type: Array,
      required: true,
    },
    navindex: Number,
  },
  methods: {
    onClick(index) {
      this.$emit('onChange', index);
    },
  },
};
</script>

<style scoped>
.nav_contenter {
  width: 100%;
  height: 64px;
  background-color: rgb(255, 255, 255);
  overflow: scroll;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.nav_contenter::-webkit-scrollbar {
  display: none;
}
.nav_contenter_flex {
  height: 64px;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.nav_item {
  text-align: center;
  padding: 20px 20px;
  flex: 1;
}
.active {
  border-bottom: 1px solid red;
}
</style>